<template>
    <CommonModal v-model:show="modalShow" :title="modalTitle" @onSubmit="onSubmit" style="width: 800px">
        <n-form
            ref="modalFormRef"
            :model="modalForm"
            :inline="false"
            :rules="rules">
            <n-grid :cols="24" :x-gap="24">
                <n-form-item-gi :span="12" label="用户账号" path="userName">
                    <n-input v-model:value="modalForm.userName" clearable placeholder="请输入用户账号"/>
                </n-form-item-gi>

              <n-form-item-gi :span="12" label="邮箱" path="email">
                <n-input v-model:value="modalForm.email" clearable placeholder="请输入邮箱"/>
              </n-form-item-gi>

              <n-form-item-gi :span="12" label="授权开始时间" path="expStartTime">
                <n-date-picker  v-model:formatted-value="modalForm.expStartTime"  value-format="yyyy-MM-dd HH:mm:ss" type="datetime" />
              </n-form-item-gi>

              <n-form-item-gi :span="12" label="授权结束时间" path="expEndTime">
                <n-date-picker v-model:formatted-value="modalForm.expEndTime"  value-format="yyyy-MM-dd HH:mm:ss" type="datetime" />
              </n-form-item-gi>



                <n-form-item-gi :span="24" label="状态" path="status">
                    <n-radio-group v-model:value="modalForm.status" name="radioGroup2" size="small">
                        <n-radio-button v-for="(item, index) in statusDict" :key="index" :value="item.value">
                            {{ item.label }}
                        </n-radio-button>
                    </n-radio-group>
                </n-form-item-gi>

              <n-form-item-gi :span="12" label="密码" >
                <n-input v-model:value="modalForm.password" style="width: 100%" clearable type="password"/>
              </n-form-item-gi>

              <n-form-item-gi :span="12" label="密码校验"  >
                <n-input v-model:value="modalForm.reenteredPassword" style="width: 100%"  :disabled="!modalForm.password" clearable type="password" @keydown.enter.prevent/>
              </n-form-item-gi>

                <n-form-item-gi :span="24" label="备注" path="remark">
                    <n-input v-model:value="modalForm.remark" clearable type="textarea" placeholder="请输入备注"/>
                </n-form-item-gi>
            </n-grid>
        </n-form>
    </CommonModal>
</template>

<script lang="ts">
import {defineComponent} from "vue";
import CommonModal from "@/components/commonModal/index.vue";
import {useCommonModal} from "@/components/commonModal/useCommonModal";
import {userController} from "@/api";
import {useDynamicDict} from "@/dictionary/useDynamicDict";
import {useStaticDict} from "@/dictionary/useStaticDict";
import {FormItemRule, UploadFileInfo} from "naive-ui";

export default defineComponent({
    name: "UserEditForm",
    components: {
        CommonModal
    },
    setup() {
        const {
            modalShow,
            modalTitle,
            modalForm,
            modalFormRef,
            modalLoading,
            onAdd,
            onEdit,
            onSubmit,
            onDeleteById,
            onDeleteByIds
        } = useCommonModal("用户", {
                sex: "0",
                status: "0"
            },
            userController.add,
            userController.edit,
            userController.deleteById,
            userController.deleteByIds
        )

        console.log(modalForm.value)
        const {roleDict, deptDict, postDict} = useDynamicDict()
        const {statusDict, sexDict} = useStaticDict()

        const rules = {
            deptId: {type: "number", required: true, message: "请选择归属部门", trigger: ['blur', 'change']},
            status: {type: "string", required: true, message: "请选择状态", trigger: ["blur", "change"]},
            postIds: {type: "array", required: true, message: "请选择岗位", trigger: ["blur", "change"]},
            roleIds: {type: "array", required: true, message: "请选择角色", trigger: ["blur", "change"]},
            userName: {type: "string", required: true, message: "请输入用户名", trigger: ["input", "blur"]},
            password: {type: "string", required: true, message: "请输入密码", trigger: ["input", "blur"]},
            nickName: {type: "string", required: true, message: "请输入用户昵称", trigger: ["input", "blur"]},
            reenteredPassword:[{
              required: true,
              message:'请再次输入密码',
              trigger: ['blur', 'input']
            },{
              validator: validatePasswordStartWith,
              message: '两次密码输入不一致',
              trigger: 'input'
            },{
              validator: validatePasswordSame,
              message: '两次密码输入不一致',
              trigger: ['blur', 'password-input']
            }]
        }

        const handleFinish = ({file, event}: {
          file: UploadFileInfo
          event?: ProgressEvent
        }) => {
          console.log(event)
          $message.success((event?.target as XMLHttpRequest).response)
          const ext = file.name.split('.')[1]
          file.name = `更名.${ext}`
          file.url = '__HTTPS__://www.mocky.io/v2/5e4bafc63100007100d8b70f'
          return file
        }
        function validatePasswordSame (rule: FormItemRule, value: string): boolean {
          return value === modalForm.value.password
        }
        function validatePasswordStartWith (
            rule: FormItemRule,
            value: string
        ):boolean  {
          return (
              !!modalForm.value.password &&
              modalForm.value.password.startsWith(value) &&
              modalForm.value.password.length >= value.length
          )
        }

        return {
            modalShow,
            modalTitle,
            modalForm,
            modalFormRef,
            modalLoading,
            rules,
            onAdd,
            onEdit,
            onSubmit,
            onDeleteById,
            onDeleteByIds,
            statusDict,
            sexDict,
            roleDict,
            deptDict,
            postDict
        }
    }
})
</script>

<style scoped>

</style>
